<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=devic-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
		<style type="text/css">
			.btn-right::before {
				content: "\2715";
			}
		</style>
	</head>
	<body>
		<div id="search">
			<input type="" v-model="inputValue" @input="search_point" @keyup.enter="inputadd()" placeholder="请输入搜索内容" />
			<div v-if="inputValue.length!=0">
				<span>提示栏：</span>
				<div v-for="(item,index) in search_p">
					<span>{{index+1+'.'}}</span>
					<label @click="change_input">{{item.title}}</label>
				</div>
				<div v-if="list.length!=0">
					<span>历史记录：</span>
					<div v-for="(item,index) in list">
						<span>{{index+1+'.'}}</span>
						<label @click="change_input">{{item}}</label>
						<button class="btn-right" @click="reduce(item,index)"></button>
					</div>
					<strong>历史记录：{{list.length}}条</strong>
					<button @click="clear01">
						Clear清空历史记录
					</button>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var search = new Vue({
				el: "#search",
				data: {
					list: ["kc1", "kc2", "kc3", "kc4"],
					inputValue: "",
					search_list: [{
							title: '1314521'
						},
						{
							title: 'I love you'
						},
						{
							title: 'I like it'
						},
						{
							title: 'kc4'
						}
					],
					search_p: [],
				},
				methods: {
					search_point(e) {
						let val = e.srcElement.value;
						let {
							search_list
						} = this;
						let arr = [];
						for (let i = 0; i < search_list.length; i++) {
							if (search_list[i].title.indexOf(val) !== -1) {
								arr.push(search_list[i]);

							}
						}
						if (!val) {
							tlis.search_p = [];
						} else {
							tlis.search_p = arr;
						}
					},
					inputadd: function() {
						this.list.push(this.inputValue);
					},
					change_input(e) {
						this.inputValue = e.srcElement.innerText
					},
					reduce(item, index) {
						this.list.splice(index, 1);
					},
					clear01() {
						this.list = [];
					}
				}
			})
		</script>
	</body>
</html>
